<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          .v-leave,
          .v-enter-to {
            transform: translateX(0);
            opacity: 1;
          }
          .v-leave-active,
          .v-enter-active {
            transition: 2s all;
          }
          .v-leave-to,
          .v-enter {
            transform: translateX(100px);
            opacity: 0;
          }

          .move-leave-active {
            animation: move 2s linear;
          }
          .move-enter-active {
            animation: move 2s linear reverse;
          }

          @keyframes move {
            0% {
              opacity: 1;
              transform: translateX(0);
            }
            50% {
              opacity: 1;
              transform: translateX(100px);
            }
            100% {
              opacity: 0;
              transform: translateX(200px);
            }
          }
        </style>
      </head>
      <body>
        <div id="app">
          <button @click="isShow = !isShow">按钮</button>
          <!-- 
            Vue提供内置元素，给内部子元素添加过渡&动画效果（实际上给元素添加了类名）

              enter 从隐藏到显示
                v-enter (刚开始)
                v-enter-active (中间)
                v-enter-to (结束)

              leave 从显示到隐藏
                v-leave (刚开始) 
                v-leave-active (中间)
                v-leave-to (结束)
          -->
          <transition-group>
            <p v-if="isShow" key="1">华哥不行 transition</p>
            <p v-if="isShow" key="2">华哥不行 transition</p>
          </transition-group>

          <transition name="move">
            <p v-if="isShow">华哥不行 animation</p>
          </transition>
        </div>
        <script src="./js/vue.js"></script>
        <script>
          const vm = new Vue({
            data: {
              isShow: true,
            },
          });
          vm.$mount("#app");
        </script>
      </body>
    </html>
  </body>
</html>
